<!-- 省市区 -->
<template>
  <view class="m-address">
    <view class="adduser_fill_main" :style="{ margin: noMargin ? '0' : '' }">
      <text class="textTagsLeft" v-if="showLeftTags">*</text>
      <view :class="[noMargin ? 'adduser_fill_list_left_noMargin' : 'adduser_fill_list_left']" :style="{ color: textColor ? textColor : '#262626;' }">
        <text class="textTags" v-if="showTags">*</text>
        {{ labelName }}
      </view>
      <view class="adduser_fill_list_right" :style="{ 'margin-left': noMargin ? '20rpx' : '' }">
        <picker
          class="picker"
          :style="{ width: noMargin ? '100%' : '92%' }"
          mode="multiSelector"
          :disabled="disabled"
          :range="addressList"
          range-key="name"
          :value="multiIndex"
          @change="changeVal($event)"
          @columnchange="columnchange"
        >
          <view class="pickerView">
            <input
              class="pickerInput"
              type="text"
              :disabled="true"
              placeholder-style="color:#c8c9cc;"
              @click="inputClick"
              v-model="suoshuAddress"
              :placeholder="placeholder"
            />
            <van-icon name="arrow" custom-class="pickerIcon" size="32rpx" color="#969799" />
          </view>
        </picker>
      </view>
    </view>
  </view>
</template>
<script>
import apiCommon from "@/api/common.js";

export default {
  props: {
    detailsAddress: {
      type: String,
      default: ""
    },
    // 必填小标
    showTags: {
      type: Boolean,
      default: false
    },
    //  左边展示小*号
    showLeftTags: {
      type: Boolean,
      default: false
    },
    // 提示语
    placeholder: {
      type: String,
      default: "必填, 请选择所属地区"
    },
    // 标题名称
    labelName: {
      type: String,
      default: "所属地区"
    },
    // 所展示的列数
    columnsNum: {
      type: Number,
      default: 3
    },
    noMargin: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    textColor: String
  },
  data() {
    return {
      province_list: [], // 省
      city_list: [], // 市
      county_list: [], // 区
      addressList: [],
      multiIndex: [0, 0, 0],
      suoshuAddress: ""
    };
  },
  watch: {
    detailsAddress(v) {
      this.getData();
    }
  },
  created() {
    this.getAddressData();
  },
  methods: {
    getData() {
      this.suoshuAddress = this.detailsAddress;
    },
    inputClick() {
      uni.hideKeyboard();
    },
    // 请求省市区数据
    async getAddressData() {
      let res = {};
      if (uni.getStorageSync("addressAll")) {
        res = JSON.parse(uni.getStorageSync("addressAll"));
      }
      if (res.provinceList.length > 0) {
        this.province_list = res.provinceList;
        this.city_list = res.cityList;
        this.county_list = res.countyList;
        const creatCity = [];
        const creatCounty = [];
        this.addressList = [];
        // 两列
        if (this.columnsNum == 2) {
          creatCity.push(this.city_list[0]); // 初始化城市
          this.addressList.push(this.province_list);
          this.addressList.push(creatCity);
        }
        // 三列
        if (this.columnsNum == 3) {
          creatCity.push(this.city_list[0]); // 初始化城市
          this.county_list.forEach((item) => {
            if (item.pid == creatCity[0].id) {
              creatCounty.push(item); // 初始化城市
            }
          });
          this.addressList.push(this.province_list);
          this.addressList.push(creatCity);
          this.addressList.push(creatCounty);
        }
      } else {
        uni.showToast({
          title: "没获取到数据",
          icon: "none"
        });
      }
    },
    // 单选列
    columnchange(e) {
      const index = e.detail.value;
      if (e.detail.column == 0) {
        const provinceCode = this.province_list[index].id;
        if (this.columnsNum == 2) {
          this.addressList.splice(1, 1);
        } else if (this.columnsNum == 3) {
          this.addressList.splice(1, 2);
        }
        const creatCity2 = [];
        const creatCounty2 = [];
        this.city_list.forEach((item) => {
          if (provinceCode == item.pid) {
            creatCity2.push(item);
          }
        });
        if (this.columnsNum == 2) {
          this.addressList.push(creatCity2);
        } else if (this.columnsNum == 3) {
          this.county_list.forEach((item2) => {
            if (item2.pid == creatCity2[0].id) {
              creatCounty2.push(item2);
            }
          });
          this.addressList.push(creatCity2);
          this.addressList.push(creatCounty2);
        }
        this.multiIndex = [index, 0, 0];
      }
      if (e.detail.column == 1) {
        const creatCounty3 = [];
        const cityCode = this.addressList[1][index].id;
        if (this.columnsNum == 3) {
          this.addressList.splice(2, 1);
          this.county_list.forEach((item3) => {
            if (item3.pid === cityCode) {
              creatCounty3.push(item3);
            }
          });
          this.addressList.push(creatCounty3);
          this.multiIndex[1] = index;
          this.multiIndex[2] = 0;
        }
      }
    },
    // 选中的值
    changeVal(event) {
      let index0 = "";
      let index1 = "";
      let index2 = "";
      let val1 = "";
      let val2 = "";
      let val3 = "";
      const data = this.addressList;
      const sendData = {
        provinceId: "",
        provinceName: "",
        cityId: "",
        cityName: "",
        countyId: "",
        countyName: ""
      };
      if (this.columnsNum == 2) {
        index0 = event.detail.value[0];
        index1 = event.detail.value[1];

        sendData.provinceId = data[0][index0].id;
        sendData.provinceName = data[0][index0].name;
        sendData.cityId = data[1][index1].id;
        sendData.cityName = data[1][index1].name;

        val1 = String(sendData.provinceId).substring(0, 2);
        val2 = String(sendData.cityId).substring(0, 2);

        if (val1 == val2) {
          this.$emit("changeVal", sendData);
          this.suoshuAddress = `${data[0][index0].name} ${data[1][index1].name}`;
        } else {
          uni.showToast({
            title: "您所选的省市区不匹配，请重新选择",
            icon: "none"
          });
        }
      } else if (this.columnsNum == 3) {
        index0 = event.detail.value[0];
        index1 = event.detail.value[1];
        index2 = event.detail.value[2];

        if (data[2].length > 0) {
          sendData.countyId = data[2][index2].id;
          sendData.countyName = data[2][index2].name;
          sendData.provinceId = data[0][index0].id;
          sendData.provinceName = data[0][index0].name;
          sendData.cityId = data[1][index1].id;
          sendData.cityName = data[1][index1].name;

          val1 = String(sendData.provinceId).substring(0, 2);
          val2 = String(sendData.cityId).substring(0, 2);
          val3 = String(sendData.countyId).substring(0, 2);
          if (val1 == val2 && String(sendData.cityId).substring(0, 2) == val3) {
            this.suoshuAddress = `${data[0][index0].name} ${data[1][index1].name} ${data[2][index2].name}`;
            this.$emit("changeVal", sendData);
          } else {
            uni.showToast({
              title: "您所选的省市区不匹配，请重新选择",
              icon: "none"
            });
          }
        } else {
          sendData.provinceId = data[0][index0].id;
          sendData.provinceName = data[0][index0].name;
          sendData.cityId = data[1][index1].id;
          sendData.cityName = data[1][index1].name;

          val1 = String(sendData.provinceId).substring(0, 2);
          val2 = String(sendData.cityId).substring(0, 2);
          if (val1 == val2) {
            this.$emit("changeVal", sendData);
            this.suoshuAddress = `${data[0][index0].name} ${data[1][index1].name}`;
          } else {
            uni.showToast({
              title: "您所选的省市区不匹配，请重新选择",
              icon: "none"
            });
          }
        }
      }
    }
  }
};
</script>
<style lang="scss">
.m-address {
  background-color: #ffffff;
  position: relative;
  border-bottom: 1rpx solid #f5f5f5;
  .adduser_fill_main {
    display: flex;
    padding-top: 20rpx;
    // margin: 0 0 0 40rpx;
    .textTags {
      // position: absolute;
      color: red;
      margin-right: 8rpx;
      // left: 16rpx;
    }
    .textTagsLeft {
      position: absolute;
      color: red;
      margin-right: 8rpx;
      left: 16rpx;
    }
    .adduser_fill_list_left {
      width: 160rpx;
      flex-shrink: 0;
      color: #262626;
      font-size: 28rpx;
      margin-left: 36rpx;
    }
    .adduser_fill_list_left_noMargin {
      width: 25%;
      flex-shrink: 0;
      color: #262626;
      font-size: 28rpx;
      text-align: left;
    }
    .adduser_fill_list_right {
      display: flex;
      flex-grow: 1;
      margin-left: 40rpx;
      .picker {
        width: 92%;
        .pickerView {
          display: flex;
          width: 100%;
          .pickerInput {
            font-size: 28rpx;
            padding-bottom: 20rpx;
            width: 94%;
          }
          .pickerIcon {
            margin-bottom: 20rpx;
          }
        }
      }
    }
  }
}
</style>
